import React from "react";
import { Button, List } from 'antd-mobile';
// import 'antd-mobile/dist/antd-mobile.css'

class App extends React.Component {
  render() {
    const boss = "李云龙";
    return (
      <div>
        <h1>独立团，团长{boss}</h1>
        <一营 laoda="张大喵"></一营>
        <骑兵连 laoda="孙德胜"></骑兵连>
      </div>
    )
  }
}

function 骑兵连(props) {
  return <h3>骑兵连连长{props.laoda}, 冲啊</h3>
}

class 一营 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      solders: ["虎子", "柱子", "王根生"]
    };
    // 第一种，绑定this
    // this.addSolder = this.addSolder.bind(this);
  }

  componentWillMount() {
    console.log("组件即将挂载");
  }

  componentDidMount() {
    console.log("组件已经挂载");
  }

  addSolder = () => {
    console.log("add");
    this.setState({
      solders: [...this.state.solders, "新兵蛋子" + Math.random()]
    });
  };
  render() {
    console.log("组件正在挂载...");
    
    // <!-- 第三种，箭头函数解决this问题 -->
    // onClick={() => this.addSolder()}
    return (
      <div>
        <h2>一营营长，{this.props.laoda}</h2>

        <Button type="primary" onClick={this.addSolder}>新兵入伍</Button>
        <List renderHeader={() => "士兵列表"}>
          {this.state.solders.map( v => {
            return (
              <List.Item key={v}>
                {v}
              </List.Item>
            )
          })}
        </List>
      </div>
    );
  }
}

export default App;